<template>
	<div class="monitor-3">
		<div>
			<el-date-picker @change='dateChange' v-model="createTime" type="date" :placeholder="$t('route.Select_date')" />
			<label>{{ $t('route.Sewing_power') }}</label>
			<el-input-number v-model="sewPower" />
			<el-button @click='dataTypeClick'>{{ $t('route.switch') }}</el-button>

			<div class="div-handle-right">
				<el-button @click='refreshClick'>{{isRefresh?$t('route.Stop_Refresh'):$t('route.auto_refresh')}}</el-button>
				<el-pagination :page-sizes="[60, 150, 300, 600]" @size-change="handleSizeChange" style="float: right;"
					background @current-change="handlePageChange" :current-page="query.pageNum"
					:page-size="query.pageSize" layout="total, sizes,prev, pager, next" :total="query.total">
				</el-pagination>
			</div>
		</div>

		<div>
			<div v-if="chartShow" class="chart" id="echart-1"></div>
		</div>
		<div v-show="isShowStdSew">{{ $t('route.Real_time_work') }}{{stdSew}}{{ $t('route.second') }}</div>

	</div>
</template>


<script>
import http from "../../js/http/http.js";
import api from "../../js/http/api.js";
import CommonUtils from "../../js/common/common-utils.js";
import * as echarts from 'echarts';
import EchartsUtils from '../../js/common/echarts-utils.js'
import {
	markRaw
} from 'vue'
import i18n from '../../i18n/index';
export default {
	data() {
		return {
			craftId: null,
			createTime: new Date(),
			isRefresh: false,
			mTimer: null,
			mChart: null,
			chartShow: false,
			isShowStdSew: false,
			stdSew: 0,
			sewPower: 30,
			isPower: true, //true:功率显示  false:缝纫模式显示
			yData: [],
			xData: [],
			data: [],
			option: null,
			query: {
				pageNum: 1,
				pageSize: 150,
				total: 0
			},
		};
	},
	methods: {
		dataRefresh() {
			this.mChart.clear();
			if (this.isPower) {
				this.yData = [];
				this.yData = [...this.data];
				this.option = EchartsUtils.initLineChartOption(i18n.global.t('route.Sewing_curve'), this.xData, this.yData);
			} else {
				this.yData = [];
				for (var item of this.data) {
					this.yData.push(item < this.sewPower ? 0 : 1);
				}
				this.option = EchartsUtils.initStepLineChartOption(i18n.global.t('route.Sewing_curve'), this.xData, this.yData);
			}
			this.mChart.setOption(this.option);
		},

		dataTypeClick() {
			this.isPower = !this.isPower;
			this.dataRefresh();
		},

		getPowerStepReport() {
			this.xData = [];
			this.yData = [];
			this.data = [];
			http.post(api.GET_CRAFT_POWER_REPORT, {
				craftId: this.craftId,
				pageNum: this.query.pageNum,
				pageSize: this.query.pageSize / 30,
			}, data => {
				this.query.total = data.data.total * 30;
				for (var i = 0; i < data.data.dataList.length; i++) {
					this.xData.push(i + 's');
					this.yData.push(data.data.dataList[i]);
					this.data.push(data.data.dataList[i]);
				}
				this.initEchart1(this.xData, this.yData);
			});
		},
		handlePageChange(pageNum) {
			this.query.pageNum = pageNum;
			this.getPowerStepReport();
		},
		handleSizeChange(val) {
			this.query.pageSize = val;
			this.getPowerStepReport();
		},
		dateChange() {
			this.getPowerStepReport();
		},
		refreshMarkLine(xIndex, sliderIndex) {
			this.option.series[0].markLine.data[sliderIndex].xAxis = xIndex;
			this.mChart.setOption(this.option);
			this.isShowStdSew = true;
			var index0 = this.option.series[0].markLine.data[0].xAxis;
			var index1 = this.option.series[0].markLine.data[1].xAxis;
			this.stdSew = Math.abs(index0 - index1);
		},

		initEchart1(xData, yData) {
			this.$nextTick(() => {
				if (this.mChart == null) {
					this.mChart = markRaw(echarts.init(document.getElementById("echart-1")));
					var downIndex = -1;
					var sliderIndex = 0;
					this.mChart.getZr().on('click', params => {
						let point = [params.offsetX, params.offsetY];
						if (this.mChart.containPixel('grid', point)) {
							// convertFromPixel转换像素坐标值到逻辑坐标系上的点
							let xIndex = this.mChart.convertFromPixel({
								seriesIndex: 0
							},
								point)[0];
							var index0 = this.option.series[0].markLine.data[0].xAxis;
							var index1 = this.option.series[0].markLine.data[1].xAxis;
							console.log('index0=====' + index0)
							console.log('index1=====' + index1);
							console.log('xIndex=====' + xIndex);
							if (index0 >= xIndex - 1 && index0 <= xIndex + 1) {
								sliderIndex = 0;
								console.log('===sliderIndex======' + sliderIndex)
							} else if (index1 >= xIndex - 1 && index1 <= xIndex + 1) {
								sliderIndex = 1;
								console.log('===sliderIndex======' + sliderIndex)
							}
							this.refreshMarkLine(xIndex, sliderIndex);

						}
					});
				}
				this.dataRefresh();

			})
		},
		refreshClick() {
			this.isRefresh = !this.isRefresh;
		}
	},
	created() {
		this.chartShow = true;
		this.craftId = CommonUtils.getParam(this, 'craftId', 'setCraftId');
		this.getPowerStepReport();
		this.mTimer = setInterval(() => {
			if (this.isRefresh) this.getPowerStepReport();
		}, 15000)
	},
	unmounted() {
		clearInterval(this.mTimer);
		this.chartShow = false;
	},
};
</script>

<style lang="scss" scoped>
.monitor-3 {
	>div:nth-of-type(1) {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 20px;
		background-color: #ffffff;
		padding: 20px;
		border-radius: 5px;

		>label {
			margin-left: 20px;
		}

		.div-handle-right {
			flex: 1;
			flex-direction: row-reverse;
			text-align: right;
			display: flex;
			align-items: center;

			>input:nth-of-type(1) {
				border: 1px solid #eeeeee;
				font-size: 15px;
				width: 150px;
				padding: 5px 8px;
				outline: none;
			}

			>button {
				color: #A866FF;
				margin-left: 10px;
				padding: 4px 20px;
			}
		}
	}

	>div:nth-of-type(2) {
		background-color: #ffffff;
		padding: 20px;
		border-radius: 5px;
		margin-top: 20px;

		.chart {
			height: 250px;
			width: 100%;

		}
	}

	>div:nth-of-type(3) {
		background-color: #ffffff;
		padding: 20px;
		border-radius: 5px;
		margin-top: 10px;
		font-size: 50px;
		text-align: center;
		font-weight: 800;
	}

}
</style>
